.main{
  .main-body{

    .all-resource{
      h1{
        font-size: 22px;
        padding: 24px 0 12px 0;

        span{
          font-size: 14px;
          color: #7d7d7d;
          font-weight: 100;
        }
      }
      .ranking-sort{
        background: #e9eaeb;
        margin-bottom:16px;
        ul{
          li{
            float: left;
            padding: 6px 14px;
            color: #8c8c8c;
            font-size: 14px;
            transition: all 0.3s;
            position: relative;
            cursor:pointer;
            & a:hover{
              color:#ca0813;
            }
            &::after{
              content:'';
              width: 2px;
              height: 2px;
              position: absolute;
              right: 0px;
              top:50%;
              //border-radius:50%;
              //font-size: 16px;
              display: block;
              background: #8c8c8c;
              line-height: 22px;
            }
            &:last-child::after{
              content:'';
              width: 0px;
              height: 0px;
              position: absolute;
              right: 0px;
              top:50%;
              //border-radius:50%;
              //font-size: 16px;
              display: block;
              background: #8c8c8c;
              line-height: 22px;


            }
          }

          .active{
            color:#ca0813;
          }
        }
      }
      .sort-title{
        border-bottom:2px solid #eee ;

        ul{
          li{
            padding: 10px;
            float:left;
            color:#7d7d7d;
            cursor:pointer;

          }
        }
      }
      .resource-list{
        border-bottom:2px solid #eee;
        padding-top: 14px;

        .list-details{
          width: 650px;
          float: left;
          .img{
            width:184px;
            height:144px;
          }
          .title{
            width:440px;
            margin-left: 10px;
            h2{
              font-weight: 200;
              font-size: 18px;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
              .small{
                font-size: 12px;
                color:#7ca5db;

              }
            }
            span{
              float:left;
              margin-right: 10px;
              margin-top: 14px;
              font-size: 12px;
              color:#7d7d7d;
            }
            p{
              width: 100%;
              height:54px;
              font-size: 12px;
              margin-top: 12px;
              line-height: 18px;
              color:#7d7d7d;
            }
          }

        }
        .course{

          border-top:2px solid #eee;
          border-bottom:2px solid #eee;
          padding:12px;
          width: 670px;
          float: right;
          .course-list{
            margin-right: 8px;
            margin-left: 8px;
            float: left;
            width:150px;
            .course-img{
              width: 100%;
              height: 110px;
            }
          }
          p{
            font-size: 13px;
            color: #7d7d7d;
            text-align: center;
            line-height: 18px;
            display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            padding:8px 0;
          }
        }
         .pic{
          width: 120px;
          height: 90px;
          margin-top: 12px;
          //border: 1px solid red;
          p{
            text-align: center;
            font-size: 12px;
            color: #7d7d7d;
            line-height: 20px;
            i{
              color: red;
              display: inline-block;
              line-height: 0;

            }
          }
        }
        .ctrl{
          float: right;
          width: 230px;
          margin-top: 12px;
          margin-bottom: 20px;
      }
        .box{
          width: 100px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          float: right;
          cursor:pointer;
        }
        .pay{
          color:#fff;
          background:#ca0813;


        }
        .concern{
          color: #9facc8;
          background: #fff;
          border:1px solid #9facc8;
          margin-right: 20px;
        }
      }
    }
  }
}

